import React, { Component } from 'react';
import { connect } from 'dva';
import { Input, Pagination } from 'antd';
import styles from './DetailList.less';

const Search = Input.Search;

@connect(({ headlines }) => ({
  news: headlines.news,
}))
class NewsDetailList extends Component {
  state = {
    page: 1,
    keyword: '',
  };

  updateData() {
    const { dispatch } = this.props;
    dispatch({
      type: 'headlines/queryNews',
      payload: {
        page_size: 10,
        page_num: this.state.page,
        keyword: this.state.keyword,
      },
    });
  }

  componentDidMount() {
    this.setState({ loading: false });
    this.updateData();
  }

  render() {
    let that = this;
    let { news } = this.props;

    let generatePageList = () => {
      let res = [];
      if (news.data_list) {
        for (let i = 0; i < news.data_list.length; i++) {
          res.push(
            <li className={styles.listItem} key={'zzdlist-' + i}>
              <span className={styles.leadDot}>•</span>
              <a
                className={styles.articlesLink}
                href={news.data_list[i].detail_url}
                target="_blank"
              >
                {news.data_list[i].title}
              </a>
              <span className={styles.pullRight}>{news.data_list[i].date}</span>
            </li>
          );
        }
      }
      return res;
    };

    let handleSearch = value => {
      that.setState({ keyword: value, page: 1 }, () => {
        this.updateData();
      });
    };

    let handlePageChange = (page, pageSize) => {
      that.setState({ page: page }, () => {
        this.updateData();
      });
    };

    return (
      <div className={styles.outerWidthLim}>
        <div className={styles.outerHeightLim}>
          <div className={styles.contentCard}>
            <div className={styles.cardHeader}>
              <p className={styles.cardTitle}>独家头条</p>
            </div>
            <div className={styles.cardContent}>
              <Search
                placeholder="请输入关键词"
                enterButton="搜索"
                className={styles.searchBox}
                onSearch={value => handleSearch(value)}
              />
              <ul className={styles.noLeftPadding} id="news">
                {generatePageList()}
              </ul>
              <div className={styles.pager}>
                <Pagination
                  defaultCurrent={1}
                  total={news.total_count}
                  onChange={handlePageChange}
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default NewsDetailList;
